<script setup lang="ts">
import { reactive, ref } from 'vue'
import { showNotify } from 'vant'
import { useStore } from '../store'
import { get, post, put } from '../utils/request'
import { useRoute, useRouter } from 'vue-router'
import { dayjs } from 'element-plus'
const router = useRouter()
const route = useRoute()
const form = reactive({
  class: '',
  name: '',
  gender: '',
  cardNo: '',
  mobile: '',
  allergy: ''
})

const state = reactive({
  show: false,
  disabled: false, // 提交按钮禁用
})
const cascaderValue = ref('')
const options = [
  {
    text: '三年级',
    value: '三年级',
    children: [
      { text: '青竹班', value: '青竹班' },
      { text: '三叶草班', value: '三叶草班' },
      { text: '满天星班', value: '满天星班' },
      { text: '蒲公英班', value: '蒲公英班' },
      { text: '向日葵班', value: '向日葵班' },
    ],
  },
  {
    text: '五年级',
    value: '五年级',
    children: [
      { text: '星空班', value: '星空班' },
      { text: '星辰班', value: '星辰班' },
      { text: '星河班', value: '星河班' },
      { text: '繁星班', value: '繁星班' },
      { text: '星月班', value: '星月班' },
      { text: '星云班', value: '星云班' },
    ],
  },
];

const store = useStore()

if (!store.getToken) {
  router.push('/auth?url='+encodeURIComponent(location.href))
}
// else {
//   init()
// }

const onFinish = ({ selectedOptions }) => {
  state.show = false
  form.class = selectedOptions.map((option) => option.text).join('/')
}
const save = () => {
  state.disabled = true
  // 检查数据
  if (!form.name) {
    showNotify('姓名为必填项');
    state.disabled = false
    return false
  }
  if (!form.gender) {
    showNotify('性别为必填项');
    state.disabled = false
    return false
  }
  if (!form.cardNo) {
    showNotify('身份证号为必填项');
    state.disabled = false
    return false
  }
  if (!form.mobile) {
    showNotify('紧急联系电话为必填项');
    state.disabled = false
    return false
  }

  // 提交
  post(
    'trip',
    form
  ).then(res => {
    alert('提交成功')
    window.wx.closeWindow()
    // router.push('/carnival')
  }).catch(err => {
    alert(err.response.data.msg)
    location.href = 'http://h5.fortrip.cn/form/#/trip'
  })
}
document.title = "研学报名"
</script>

<template>
  <div style="min-height: 100vh;background:#eee">
    <van-image style="width: 100%" src="./images/trip.png" />
    <h2 class="van-doc-demo-block__title">个人信息</h2>
    <van-cell-group inset>
      <!-- <van-field v-model="form.class" label="班级" /> -->
      <van-field
        v-model="form.class"
        is-link
        readonly
        label="班级"
        placeholder="请选择"
        @click="state.show = true"
      />
      <van-popup v-model:show="state.show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择"
          :options="options"
          @close="state.show = false"
          @finish="onFinish"
        />
      </van-popup>
      <van-field v-model="form.name" label="姓名" />
      <van-cell title="性别" clickable>
        <template #right-icon>
        <van-radio-group v-model="form.gender" direction="horizontal">
          <van-radio name="男">男</van-radio>
          <van-radio name="女">女</van-radio>
        </van-radio-group></template>
      </van-cell>
      <!-- <van-field v-model="form.age" label="年龄" /> -->
      <van-field v-model="form.cardNo" label="身份证号" />
      <van-field v-model="form.mobile" label="紧急联系电话" type="tel" />
      <van-field v-model="form.allergy" label="过敏物" />
    </van-cell-group>

    <div style="padding: 10px 20px;">
      <van-button type="primary" block @click="save" :disabled="state.disabled">确定</van-button>
    </div>

  </div>

</template>

<style scoped>
.van-doc-demo-block__title {
  margin: 0;
  padding: 32px 16px 16px;
  color: var(--van-doc-text-color-4);
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}
</style>